﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>围追堵截</title>
</head>
<body>
    <canvas id="ctlCanvas" width="400px" height="400px" style="background-color:black;"></canvas>
    <script src="../assets/jquery/jquery-2.1.1.min.js"></script>
    <script src="../assets/com/js/daima8.js"></script>
    <script>
        $(document).ready(function () {
            var canvas = document.getElementById("ctlCanvas");
            var ctx = canvas.getContext("2d");
            //context.fillStyle="#FF0000";
            //context.beginPath();
            //context.arc(100,100,5,0,Math.PI*2,true); //Math.PI*2是JS计算方法，是圆
            //context.closePath();
            //context.fill();

            //开始一个新的绘制路径
            ctx.beginPath();
            //设置弧线的颜色为蓝色
            ctx.strokeStyle = "blue";
            var circle = {
                x: 100,    //圆心的x轴坐标值
                y: 100,    //圆心的y轴坐标值
                r: 50      //圆的半径
            };
            ctx.fillStyle="#FF0000";
            //以canvas中的坐标点(100,100)为圆心，绘制一个半径为50px的圆形
            ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2, true);
            //按照指定的路径绘制弧线
           // ctx.stroke();
            ctx.fill();
        });
    </script>
</body>
</html>
